<template>
  <div class="div-1" style="width: 100%; height: 100vh; overflow: auto">
    <img
      class="logo"
      src="../assets/9.jpg"
      @click="$router.push({ name: 'NewHome' })"
    />
    <div
      class="div-2"
      style="width: 600px; margin: 50px auto"
      v-loading="isLoading"
    >
      <el-link @click="$router.push('/login')">立即登录</el-link>
      <div
        style="
          color: grey;
          font-size: 30px;
          text-align: center;
          padding: 10px 0;
        "
      >
        欢迎注册
      </div>
      <el-form ref="form" :model="form" size="normal" :rules="rules">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <!--//输入和输出框-->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input
            placeholder="请再次输入密码"
            prefix-icon="el-icon-info"
            v-model="form.confirm"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="上传头像" required>
          <el-upload
            ref="uploadAvatarRef"
            :file-list="coverList"
            list-type="picture-card"
            :show-file-list="false"
            action="#"
            :http-request="uploadCover"
            :before-upload="beforeUploadImage"
          >
            <i class="el-icon-plus" v-if="!form.avatar"></i>
            <img v-else :src="form.avatar" width="100%" height="100%" />
          </el-upload>
        </el-form-item>

        <el-form-item prop="realName">
          <el-input
            placeholder="请输入真实姓名"
            prefix-icon="el-icon-user-solid"
            v-model="form.realName"
          ></el-input>
        </el-form-item>

        <el-form-item prop="idCardNum">
          <el-input
            placeholder="请输入身份证号"
            prefix-icon="el-icon-s-custom"
            v-model="form.idCardNum"
          ></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio v-model="form.gender" label="男">男</el-radio>
          <el-radio v-model="form.gender" label="女">女</el-radio>
        </el-form-item>

        <el-form-item prop="zyhAccount">
          <el-input
            placeholder="请输入志愿汇账号"
            prefix-icon="el-icon-s-check"
            v-model="form.zyhAccount"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="上传证书" required>
          <el-upload
            ref="uploadNumRef"
            :file-list="coverList"
            list-type="picture-card"
            action="#"
            :show-file-list="false"
            :http-request="uploadCover1"
            :before-upload="beforeUploadImage"
          >
            <i class="el-icon-plus" v-if="!form.qualificationTypeUrl"></i>
            <img
              v-else
              :src="form.qualificationTypeUrl"
              width="100%"
              height="100%"
            />
          </el-upload>
        </el-form-item>

        <el-form-item prop="qualificationTypeNum">
          <el-input
            placeholder="请输入证书编号"
            prefix-icon="el-icon-s-management"
            v-model="form.qualificationTypeNum"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: "register",
  data() {
    return {
      form: {
        username: "",
        password: "",
        confirm: "",
        avatar: "",
        realName: "",
        idCardNum: "",
        gender: "",
        zyhAccount: "",
        qualificationTypeUrl: "",
        qualificationTypeNum: "",
      },
      isLoading: false,
      travelImgViewUrl: "",
      travelImgViewVisible: false,
      coverList: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirm: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        idCardNum: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
        ],
        zyhAccount: [
          { required: true, message: "请输入志愿汇账号", trigger: "blur" },
        ],
        qualificationTypeNum: [
          { required: true, message: "请输入证书编号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    register() {
      this.isLoading = true;
      if (this.form.password !== this.form.confirm) {
        this.isLoading = false;
        this.$message({
          type: "error",
          message: "两次输入密码不一致",
        });
        this.form.password = "";
        this.form.confirm = "";
        return;
      }
      request.postRequest("api/volunteer/register", this.form).then((res) => {
        if (res.data.code === 0) {
          //!!!存在疑问
          this.$message({
            type: "success",
            message: "注册成功",
          });
          this.$router.push("/login"); //页面跳转登陆成功后跳转到主页
        } else {
          this.$message({
            type: "error",
            message: "注册失败",
          });
        }
      });
    },
    uploadCover({ file }) {
      this.isLoading = true;
      let param = {
        file: file,
      };
      console.log(file);
      console.log(param);
      request.uploadFileRequest("/api/upload/avatar", param).then((res) => {
        this.isLoading = false;
        this.form.avatar = res.data.data;
        // let id = res.data.data.id;
        // this.form.coverFileId = id;
        // file.id = id;
      });
    },
    uploadCover1({ file }) {
      this.isLoading = true;
      let param = {
        file: file,
      };
      request.uploadFileRequest("/api/upload/volunteer", param).then((res) => {
        this.isLoading = false;
        this.form.qualificationTypeUrl = res.data.data;
        console.log(this.form);
        // let id = res.data.data.id;
        // this.form.coverFileId = id;
        // file.id = id;
      });
    },
    handleCoverPreview(file) {
      this.travelImgViewUrl = file.url;
      this.travelImgViewVisible = true;
    },
    handleCoverRemove() {
      this.form.avatar = "";
    },
    handleCoverRemove1() {
      this.form.qualificationTypeUrl = "";
    },
    beforeUploadImage(file) {
      let type = file.type;
      const isJPG = type.startsWith("image");
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error("只能上传图片!");
      }
      if (!isLt10M) {
        this.$message.error("图片大小不能超过 10MB!");
      }
      return isJPG && isLt10M;
    },
  },
};
</script>
<style scoped>
.div-1 {
  background: url("../assets/23.jpg");
}
.div-2 {
  width: 450px;
  height: 1100px;
  background-image: url("../assets/980.jpg"); /* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
